<template>
  <h1>Container容器布局组件</h1>
    <div class="common-layout">
      <el-container>
<!--          侧边栏-->
        <el-aside width="200px">
        <el-menu>
          <el-menu-item index="1">员工管理</el-menu-item>
          <el-menu-item index="2">车辆管理</el-menu-item>
          <el-menu-item index="3">围栏管理</el-menu-item>
        </el-menu>
        </el-aside>
        <el-container>
<!--          右侧头部-->
          <el-header>
            <h1 style="background-color: #0aa1ed; color: white">智慧车辆系统</h1>
          </el-header>
<!--          右侧主体区域-->
          <el-main>
            <el-table :data="vehicleArr">
              <el-table-column label="序号" type="index" align="center" width="80"></el-table-column>
              <el-table-column label="品牌" prop="brand" align="center" ></el-table-column>
              <el-table-column label="型号" prop="model" align="center" ></el-table-column>
              <el-table-column label="车牌号" prop="license" align="center" ></el-table-column>
              <el-table-column label="颜色" prop="color" align="center" ></el-table-column>
              <el-table-column label="公里数" prop="km" align="center" ></el-table-column>
            </el-table>
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>

<script setup>

import {ref} from "vue";

const vehicleArr=ref([
  {brand:'奥迪',model:'A8',license:'京AG6005',color:'黑',km:100000},
  {brand:'奥迪',model:'A8',license:'京AG6005',color:'黑',km:100000},
  {brand:'奥迪',model:'A8',license:'京AG6005',color:'黑',km:100000},
  {brand:'奥迪',model:'A8',license:'京AG6005',color:'黑',km:100000},
  {brand:'奥迪',model:'A8',license:'京AG6005',color:'黑',km:100000},
  {brand:'奥迪',model:'A8',license:'京AG6005',color:'黑',km:100000},
  {brand:'奥迪',model:'A8',license:'京AG6005',color:'黑',km:100000},
  {brand:'奥迪',model:'A8',license:'京AG6005',color:'黑',km:100000},
])
</script>


<style scoped>

</style>